import React, { useEffect, useState } from "react";

import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, LayoutChangeEvent, Dimensions } from "react-native"
import { remove } from "../../utils/Storage";
import { useNavigation } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import UserStore from "../../stores/UserStore";
import { observer, useLocalObservable, } from "mobx-react";
import MineStore from "./MineStore";
import Empty from "../../components/Empty";
import { RefreshControl } from "react-native-gesture-handler";
import SideMenu, { SideMenuRef } from "./SideMenu";
import icon_mine_bg from "../../assets/icon_mine_bg.png"
import icon_menu from "../../assets/icon_menu.png"
import icon_shop_car from "../../assets/icon_shop_car.png"
import icon_share from "../../assets/icon_share.png"
import icon_location_info from "../../assets/icon_location_info.png"
import icon_qrcode from "../../assets/icon_qrcode.png"
import icon_add from "../../assets/icon_add.png"
import icon_male from "../../assets/icon_male.png"
import icon_female from "../../assets/icon_female.png"
import icon_setting from "../../assets/icon_setting.png"
import icon_no_note from "../../assets/icon_no_note.webp"
import icon_no_collection from "../../assets/icon_no_collection.webp"
import icon_no_favorate from "../../assets/icon_no_favorate.webp"
import Heart from "../../components/Heart";
import { useRef } from "react";


const EMPTY_CONFIG = [
    { icon: icon_no_note, tips: '快去发布今日的好心情吧~' },
    { icon: icon_no_collection, tips: '快去收藏你喜欢的笔记吧~' },
    { icon: icon_no_favorate, tips: '喜欢点赞的人运气不会太差哦~' },
]

const { width: SCREEN_WIDTH } = Dimensions.get('window');
export default observer(() => {
    const navigation = useNavigation<StackNavigationProp<any>>()
    const { userInfo } = UserStore;
    const store = useLocalObservable(() => new MineStore);
    const [tabIndex, setTabIndex] = useState<number>(0);
    const [bgImgHeight, setBgImgHeight] = useState<number>(400)
    const sideMenuRef = useRef<SideMenuRef>(null)
    useEffect(() => {
        store.requestAll()
    }, [])
    const onArticlePress = (item: ArticleSimple) => {
        navigation.push('ArticleDetail', { id: item.id })
    }
    const renderTitle = () => {
        const titleStyles = StyleSheet.create({
            titleLayout: {
                width: '100%',
                height: 48,
                flexDirection: 'row',
                alignItems: 'center'
            },
            menuButton: {
                height: '100%',
                justifyContent: 'center',
                paddingHorizontal: 16
            },
            menuImg: {
                width: 24,
                height: 24,
                resizeMode: 'contain'
            },
            rightImg: {
                marginHorizontal: 12,
                tintColor: 'white'
            }
        })
        return (
            <View style={titleStyles.titleLayout}>
                <TouchableOpacity style={titleStyles.menuButton}
                    onPress={() => {
                        sideMenuRef.current?.show()
                    }}>
                    <Image style={titleStyles.menuImg} source={icon_menu} />
                </TouchableOpacity>
                <View style={{ flex: 1 }}></View>
                <Image style={[titleStyles.menuImg, titleStyles.rightImg]} source={icon_shop_car} />
                <Image style={[titleStyles.menuImg, titleStyles.rightImg]} source={icon_share} />
            </View>
        )
    }
    const renderInfo = () => {
        const { avatar, nickName, redBookId, desc, sex } = userInfo;
        const InfoStyles = StyleSheet.create({
            avatarLayout: {
                width: '100%',
                alignItems: 'flex-end',
                flexDirection: 'row',
                padding: 16
            },
            avatarImg: {
                width: 96,
                height: 96,
                resizeMode: 'cover',
                borderRadius: 48
            },
            addImg: {
                width: 28,
                height: 28,
                marginLeft: -28,
                marginBottom: 2
            },
            nameLayout: {
                marginLeft: 20
            },
            nameTxt: {
                fontSize: 22,
                color: 'white',
                fontWeight: 'bold'
            },
            idLayout: {
                marginTop: 16,
                marginBottom: 20,
                flexDirection: 'row',
                alignItems: 'center',
            },
            idTxt: {
                fontSize: 12,
                color: '#bbb',
                fontWeight: 'bold'
            },
            qrcodeImg: {
                width: 11,
                height: 11,
                marginLeft: 6,
                tintColor: '#bbb',
                marginTop: 2
            },
            descTxt: {
                fontSize: 14,
                color: 'white',
                paddingHorizontal: 16
            },
            sexLayout: {
                width: 28,
                height: 22,
                backgroundColor: '#ffffff50',
                marginTop: 12,
                marginLeft: 16,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 20,
            },
            sexImg: {
                width: 12,
                height: 12,
                resizeMode: 'contain'
            },
            infoLayout: {
                width: '100%',
                paddingRight: 16,
                marginTop: 20,
                flexDirection: 'row',
                alignItems: 'center',
                marginBottom: 36
            },
            infoItem: {
                alignItems: 'center',
                paddingHorizontal: 16,

            },
            infoValue: {
                color: 'white',
                fontSize: 18
            },
            infoLabel: {
                color: '#ddd',
                fontSize: 14,
                marginTop: 4
            },
            infoButton: {
                height: 32,
                paddingHorizontal: 14,
                alignItems: 'center',
                borderWidth: 1,
                borderColor: '#fff',
                borderRadius: 16,
                justifyContent: 'center',
                marginLeft: 16
            },
            editTxt: {
                color: 'white',
                fontSize: 14,
            },
            infoImg: {
                width: 22,
                height: 22,
                resizeMode: 'contain',
                tintColor: 'white'
            }
        })
        const { info } = store
        return (
            <View onLayout={(e: LayoutChangeEvent) => {
                const { height } = e.nativeEvent.layout
                setBgImgHeight(height)
                console.log(JSON.stringify(e.nativeEvent.layout));

            }}>
                <View style={InfoStyles.avatarLayout}>
                    <Image style={InfoStyles.avatarImg} source={{ uri: avatar }} />
                    <Image style={InfoStyles.addImg} source={icon_add} />
                    <View style={InfoStyles.nameLayout}>
                        <Text style={InfoStyles.nameTxt}>{nickName}</Text>
                        <View style={InfoStyles.idLayout}>
                            <Text style={InfoStyles.idTxt}>小红书号:{redBookId}</Text>
                            <Image style={InfoStyles.qrcodeImg} source={icon_qrcode} />
                        </View>
                    </View>
                </View>
                <Text style={InfoStyles.descTxt}>{desc}</Text>
                <View style={InfoStyles.sexLayout}>
                    <Image style={InfoStyles.sexImg} source={sex === 'male' ? icon_male : icon_female} />
                </View>
                <View style={InfoStyles.infoLayout}>
                    <View style={InfoStyles.infoItem}>
                        <Text style={InfoStyles.infoValue}>{info.followCount}</Text>
                        <Text style={InfoStyles.infoLabel}>关注</Text>
                    </View>
                    <View style={InfoStyles.infoItem}>
                        <Text style={InfoStyles.infoValue}>{info.fans}</Text>
                        <Text style={InfoStyles.infoLabel}>粉丝</Text>
                    </View>
                    <View style={InfoStyles.infoItem}>
                        <Text style={InfoStyles.infoValue}>{info.favorateCount}</Text>
                        <Text style={InfoStyles.infoLabel}>获赞与收藏</Text>
                    </View>
                    <View style={{ flex: 1 }}></View>
                    <TouchableOpacity style={InfoStyles.infoButton}>
                        <Text style={InfoStyles.editTxt}>编辑资料</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={InfoStyles.infoButton}>
                        <Image style={InfoStyles.infoImg} source={icon_setting} />
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
    const renderTabs = () => {
        const styles = StyleSheet.create({
            titleLayout: {
                width: '100%',
                height: 48,
                flexDirection: 'row',
                alignItems: 'center',
                backgroundColor: 'white',
                paddingHorizontal: 16,
                justifyContent: 'center',
                borderTopLeftRadius: 12,
                borderTopRightRadius: 12,
                borderBottomWidth: 1,
                borderBottomColor: '#eee'
            },
            icon: {
                width: 28,
                height: 28,
            },
            line: {
                width: 28,
                height: 2,
                backgroundColor: '#ff2442',
                borderRadius: 1,
                position: 'absolute',
                bottom: 6,
            },
            tabButton: {
                paddingHorizontal: 14,
                height: '100%',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
            },
            tabTxt: {
                fontSize: 17,
                color: '#999',
            },
            tabTxtSelected: {
                fontSize: 17,
                color: '#333',
            },
        });
        return (
            <View style={styles.titleLayout}>
                <TouchableOpacity
                    style={styles.tabButton}
                    onPress={() => {
                        setTabIndex(0)
                    }}>
                    <Text style={tabIndex === 0 ? styles.tabTxtSelected : styles.tabTxt}>笔记</Text>
                    {tabIndex === 0 && <View style={styles.line} />}
                </TouchableOpacity>

                <TouchableOpacity
                    style={styles.tabButton}
                    onPress={() => {
                        setTabIndex(1)
                    }}
                >
                    <Text style={tabIndex === 1 ? styles.tabTxtSelected : styles.tabTxt}>收藏</Text>
                    {tabIndex === 1 && <View style={styles.line} />}
                </TouchableOpacity>

                <TouchableOpacity
                    style={styles.tabButton}
                    onPress={() => {
                        setTabIndex(2)
                    }}
                >
                    <Text style={tabIndex === 2 ? styles.tabTxtSelected : styles.tabTxt}>赞过</Text>
                    {tabIndex === 2 && <View style={styles.line} />}
                </TouchableOpacity>

            </View>
        )
    }


    const renderList = () => {
        const { noteList, collectionList, favorateList } = store
        const currentList = [noteList, collectionList, favorateList][tabIndex]
        if (!currentList?.length) {
            const config = EMPTY_CONFIG[tabIndex]
            return <Empty icon={config.icon} tips={config.tips} />
        }
        const listStyles = StyleSheet.create({
            ListContainer: {
                width: '100%',
                flexDirection: 'row',
                flexWrap: 'wrap',
                backgroundColor: 'white'
            },
            item: {
                width: (SCREEN_WIDTH - 18) >> 1,
                backgroundColor: 'white',
                marginLeft: 6,
                marginBottom: 6,
                borderRadius: 8,
                overflow: 'hidden',
                marginTop: 10
            },
            titleTxt: {
                fontSize: 14,
                color: '#333',
                marginHorizontal: 10,
                marginVertical: 4,
            },
            nameLayout: {
                width: '100%',
                flexDirection: 'row',
                alignItems: 'center',
                paddingHorizontal: 10,
                marginBottom: 10,
            },
            avatarImg: {
                width: 20,
                height: 20,
                resizeMode: 'cover',
                borderRadius: 10,
            },
            nameTxt: {
                fontSize: 12,
                color: '#999',
                marginLeft: 6,
                flex: 1,
            },
            heart: {
                width: 20,
                height: 20,
                resizeMode: 'contain',
            },
            countTxt: {
                fontSize: 14,
                color: '#999',
                marginLeft: 4,
            },
            itemImg: {
                width: SCREEN_WIDTH - 18 >> 1,
                height: 240
            }
        })
        return (
            <View style={listStyles.ListContainer}>
                {currentList.map((item, index) => {
                    return (
                        <TouchableOpacity key={`${item.id}-${index}`} style={listStyles.item}
                            onPress={() => {
                                onArticlePress(item)
                            }}>
                            <Image style={listStyles.itemImg} source={{ uri: item.image }} />
                            <Text style={listStyles.titleTxt}>{item.title}</Text>
                            <View style={listStyles.nameLayout}>
                                <Image style={listStyles.avatarImg} source={{ uri: item.avatarUrl }} />
                                <Text style={listStyles.nameTxt}>{item.userName}</Text>
                                <Heart
                                    value={item.isFavorite}
                                    onValueChanged={(value: boolean) => {
                                        console.log(value);
                                    }}
                                />
                                <Text style={listStyles.countTxt}>{item.favoriteCount}</Text>
                            </View>
                        </TouchableOpacity>
                    )
                })}
            </View>
        )
    }
    return (
        <View style={styles.root}>
            {/* <Text>我的</Text>*/}
            <Image style={[styles.bg, { height: bgImgHeight + 48 + 16 }]} source={icon_mine_bg} />
            {renderTitle()}
            <ScrollView style={styles.scrollView}
                refreshControl={
                    <RefreshControl onRefresh={store.requestAll}
                        refreshing={store.refreshing} />}>
                {renderInfo()}
                {renderTabs()}
                {renderList()}
            </ScrollView>
            <SideMenu ref={sideMenuRef} />
        </View>
    )
})

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
    },
    bg: {
        position: 'absolute',
        top: 0,
        width: '100%',
        height: 400
    },
    scrollView: {
        width: '100%',
        flex: 1,
    }
})